<template>
  <div class="indent-outbound-entrying">
    <!-- 搜索表单 -->
    <div class="search-wrap mt5">
      <SearchForm ref="searchFormRef" :list="[...formList]" @submit="search" @reset="reset"></SearchForm>
    </div>

    <!-- 表头 -->
    <el-row class="table-head">
      <el-col :span="6" class="col1">
        <span>商品信息</span>
      </el-col>
      <el-col :span="3"> 商品类目 </el-col>
      <el-col :span="3"> 关联客户 </el-col>
      <el-col :span="2"> 商品单位 </el-col>
      <el-col :span="2"> 状态 </el-col>
      <!-- <el-col :span="2"> 状态明细 </el-col> -->
      <el-col :span="2"> 关联编码</el-col>
      <el-col :span="2"> 创建时间</el-col>
      <el-col :span="2"> 商品数量</el-col>
      <el-col :span="2"> 商品件数</el-col>
    </el-row>

    <!-- 列表 -->
    <div class="table-list">
      <el-empty description="暂无数据" v-if="!list.length" />
      <el-checkbox-group v-model="checkedList">
        <div class="goods" v-for="(item, index) in list" :key="index">
          <el-row>
            <el-col :span="6" class="col1">
              <div class="prod-info">
                <div class="left">
                  <img :src="item.mainPicUrl" alt="" />
                </div>
                <div class="right">
                  <h3 class="name">{{ item.productAliasName || "-" }}</h3>
                  <p style="white-space: break-spaces; word-break: break-all">
                    <!-- {{ getSpes(item.skuSpecification) }} -->
                    {{ item.skuSpecification }}
                  </p>
                  <p>SKU编码：{{ item.skuCode || "-" }}</p>
                  <p>ID：{{ item.productId || "-" }}</p>
                </div>
              </div>
            </el-col>
            <el-col :span="3"> {{ item.categoryNameList?.join(">") || "-" }}</el-col>
            <el-col :span="3" style="white-space: break-spaces; word-break: break-all">
              {{ item.customerName + "-" + item.customerMobileCode || "-" }}
            </el-col>
            <el-col :span="2"> {{ getName(item.productUnit) || "-" }}</el-col>
            <el-col :span="2">{{ getStatusText(item.status) }}</el-col>
            <!-- <el-col :span="2" style="text-align: center"
              ><el-button type="primary" link @click="dialogVisible = true">明细</el-button></el-col
            > -->
            <el-col :span="2" style="word-break: break-all"> {{ item.associateCode || "-" }}</el-col>
            <el-col :span="2"> {{ item.createTime || "-" }}</el-col>
            <el-col :span="2"> {{ item.commodityNum || "-" }}</el-col>
            <el-col :span="2"> {{ item.detailNum || "-" }}</el-col>
          </el-row>
          <div class="remark">
            <div class="label">
              <span>备注：{{ item.remark || "-" }}</span>
            </div>
          </div>
        </div>
      </el-checkbox-group>
    </div>
    <!-- 分页 -->
    <div class="pt20 pb20" v-if="list.length > 0" style="display: flex; justify-content: flex-end">
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :page-sizes="[10, 20, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 状态明细弹窗 -->
    <el-dialog v-model="dialogVisible" title="状态明细" width="1200" :before-close="handleClose">
      <div class="status-detail">
        <!-- 数据表格 -->
        <el-table class="jzt-table" :data="list" stripe border style="width: 100%; max-height: 500px; overflow-y: auto">
          <el-table-column label="商品信息" fixed width="300">
            <template #default="scope">
              <div class="prod-info">
                <div class="left">
                  <img :src="scope.row.mainPicUrl" alt="" />
                </div>
                <div class="right">
                  <h3 class="name">{{ scope.row.productAliasName || "-" }}</h3>
                  <p style="white-space: break-spaces; word-break: break-all">
                    <!-- {{ getSpes(scope.row.skuSpecification) }} -->
                    {{ scope.row.skuSpecification }}
                  </p>
                  <p style="white-space: break-spaces; word-break: break-all">SKU编码：{{ scope.row.skuCode || "-" }}</p>
                  <p>ID:{{ scope.row.businessSkuId || "-" }}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="categoryNameList" show-overflow-tooltip label="商品类目" width="140">
            <template #default="scope">
              {{ scope.row.categoryNameList?.join(">") || "-" }}
            </template>
          </el-table-column>
          <el-table-column prop="customerName" show-overflow-tooltip label="关联客户" width="140">
            <template #default="scope">
              {{ scope.row.customerName + "-" + scope.row.customerMobileCode || "-" }}
            </template>
          </el-table-column>
          <el-table-column prop="productUnit" show-overflow-tooltip label="单位" width="140">
            <template #default="scope">
              {{ getName(scope.row.productUnit) || "-" }}
            </template>
          </el-table-column>
          <el-table-column prop="status" show-overflow-tooltip label="状态" width="140">
            <template #default="scope">
              {{ getStatusText(scope.row.status) }}
            </template>
          </el-table-column>
          <el-table-column prop="availableProductNum" show-overflow-tooltip label="关联编码" width="140">
            <template #default="scope">
              <div style="word-break: break-all">{{ scope.row.associateCode || "-" }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" show-overflow-tooltip label="创建时间" width="140" />
          <el-table-column prop="commodityNum" show-overflow-tooltip label="商品数量" width="140" />
          <el-table-column prop="detailNum" show-overflow-tooltip label="商品件数" width="140" />
        </el-table>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">我知道了</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, nextTick, onMounted } from "vue";
import SearchForm from "@/components/SearchForm";
import { waitInboundProductPage } from "@/apis/procure/indent-outbound";
import useCodeArrStore from "@/store/modules/select";
import { ListPage } from "@/apis/procure/warehouse";
import { getcategoryList2 } from "@/apis/products/specifications";

const statusArr = [
  { value: "1", label: "待采购" },
  { value: "2", label: "待接单" },
  { value: "3", label: "被拒绝" },
  { value: "4", label: "待发货" },
  // { value: "5", label: "部分发货" },
  // { value: "6", label: "已发货(全部)" },
  { value: "7", label: "待入库" },
  { value: "8", label: "部分入库" }
  // { value: "9", label: "已入库(全部)" },
  // { value: "10", label: "待出库" },
  // { value: "11", label: "部分出库" },
  // { value: "12", label: "已出库(全部)" }
];
const formList = ref([
  {
    label: "关联编码",
    model: "associateCode",
    type: "input",
    labelWidth: "70"
  },
  {
    label: "状态",
    model: "status",
    type: "select",
    labelWidth: "70",
    data: statusArr
  },
  {
    label: "客户信息",
    model: "associateCustomerQueryType-associateCustomer",
    type: "select-input",
    labelWidth: "70",
    data: [
      {
        value: 0,
        label: "全部"
      },
      {
        value: 1,
        label: "姓名"
      },
      {
        value: 2,
        label: "电话"
      }
    ]
  },
  {
    label: "商品分类",
    model: "categoryIdList",
    type: "cascader",
    labelWidth: "70",
    data: [],
    props: { checkStrictly: false, expandTrigger: "hover", label: "name", value: "categoryId", multiple: true }
  }
]);
const formData = ref({});
const list = ref([]);
const checkedList = ref([]); //选中的数据
const isIndeterminate = ref(false);
const checkAll = ref(false);
const pagination = ref({
  page: 1,
  size: 10,
  total: 0
});
const dialogVisible = ref(false);
const detailList = ref([]); //状态明细列表

onMounted(async () => {
  const res = await ListPage({ page: 1, size: 9999 }); //仓库list
  const res2 = await getcategoryList2({ searchkey: "" }); //商品分类
  formList.value.map(item => {
    if (item.model === "warehouseId") {
      item.data = res.data.records;
    } else if (item.model === "categoryIdList") {
      item.data = res2.data;
    }
  });
  getList();
});

const handleClose = () => {
  dialogVisible.value = false;
};

const getStatusText = val => {
  if (!val) return "-";
  const obj = statusArr.find(item => item.value == val);
  return obj?.label || "-";
};

const getName = code => {
  return useCodeArrStore().getDictName("shop_unit", code);
};

const getList = async () => {
  console.log("表单数据===", formData.value);
  const res = await waitInboundProductPage({
    ...formData.value,
    categoryIdList: formData.value?.categoryIdList ? formData.value.categoryIdList.map(item => item[item.length - 1]) : [],
    page: pagination.value.page,
    size: pagination.value.size
  });
  list.value = res.data.records;
  pagination.value.total = res.data.total;
};

// 表单查询组件submit回调
const search = form => {
  if (form) {
    let _form = JSON.parse(JSON.stringify(form));
    formData.value = _form;
    // console.log("处理后的数据", formData.value);
  } else {
    formData.value = {};
  }
  nextTick(() => {
    getList();
  });
};

//清空查询表单
const reset = () => {
  search("");
};

const handleSizeChange = async val => {
  pagination.value.size = val;
  await getList();
};
const handleCurrentChange = async val => {
  pagination.value.page = val;
  await getList();
};
//拼接商品的sku规格
const getSpes = properties => {
  if (!properties) return "-";
  const arr = JSON.parse(properties) || [];
  if (arr.length > 1) {
    const str = arr.reduce((a, b) => {
      return a.specificationVal + "+" + b.specificationVal;
    });
    return str;
  } else if (arr.length === 1) {
    return arr[0].specificationVal;
  } else {
    return "-";
  }
};
</script>

<style lang="scss" scoped>
.status-detail {
  .prod-info {
    display: flex;

    .left {
      img {
        width: 80px;
        height: 80px;
        border-radius: 4px;
      }
    }

    .right {
      padding-left: 18px;

      .name {
        font-size: 14px;
        color: #3d3d3d;
        margin-bottom: 5px;
      }

      p {
        font-size: 12px;
        color: #86909c;
        margin-bottom: 5px;
      }
    }
  }
}

.indent-outbound-entrying {
  .search-wrap {
    background-color: #f6f8fa;
    padding: 20px;
  }

  .col1 {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;

    .prod-info {
      display: flex;

      .left {
        img {
          width: 80px;
          height: 80px;
          border-radius: 4px;
        }
      }

      .right {
        padding-left: 18px;

        .name {
          font-size: 14px;
          color: #3d3d3d;
          margin-bottom: 5px;
        }

        p {
          font-size: 12px;
          color: #86909c;
          margin-bottom: 5px;
        }
      }
    }
  }

  .table-head {
    margin: 20px 0 10px 0;

    :deep(.el-col) {
      padding: 10px;
      background-color: #f2f6fc;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .table-list {
    .goods {
      margin-bottom: 10px;
      border: 1px solid #e1e6ed;
      border-right: none;

      :deep(.el-row) {
        font-size: 14px;
        line-height: 20px;

        .el-col {
          padding: 10px;
          border-right: 1px solid #e1e6ed;
        }
      }

      .image {
        width: 80px;
        height: 80px;
        border-radius: 4px;
        background-color: gray;
        margin-right: 18px;
      }

      .remark {
        font-size: 14px;
        line-height: 20px;
        border-top: 1px solid #e1e6ed;
        border-right: 1px solid #e1e6ed;
        padding: 8px 20px;
        display: flex;
        align-items: center;

        .label {
          width: 100%;
        }
      }
    }
  }
}
</style>
